<template>
  <div>
    <el-container class="elContainer">
      <!-- 顶部导航栏 -->
      <el-header class="elHeader d-flex align-items-center">
        <a class="text-light h5 mb-0 mr-auto">{{ $conf.logo }}</a>
        <el-menu
          :default-active="navBar.active"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item
            :index="index | numToString"
            v-for="(item, index) in navBar.list"
            :key="index"
          >
            {{ item.name }}
          </el-menu-item>
          <el-submenu index="6">
            <template slot="title">
              <el-avatar
                size="small"
                src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
              >
              </el-avatar>
              Sunny</template
            >
            <el-menu-item index="6-1">修改</el-menu-item>
            <el-menu-item index="6-2">退出</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-header>
      <!-- /顶部导航栏 -->
      <el-container style="height: 100%">
        <!-- 侧边栏 -->
        <el-aside width="200px">
          <el-menu
            style="height: 100%"
            :default-active="slideMenusActive"
            @select="SlideSelect"
          >
            <el-menu-item
              :index="index | numToString"
              v-for="(item, index) in slideMenus"
              :key="index"
            >
              <i :class="item.icon"></i>
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <!-- /侧边栏 -->
        <!-- 主体部分 -->
        <el-main
          class="bg-light"
          style="padding-bottom: 60px; position: relative"
        >
          <!-- 面包屑导航 -->
          <div
            class="border-bottom mb-2 bg-white"
            style="padding: 20px; margin: -20px"
            v-if="bran.length > 0"
          >
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item
                :to="{ path: item.path }"
                v-for="(item, index) in bran"
                :key="index"
              >
                {{ item.title }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <!-- /面包屑导航 -->
          <router-view />
          <el-backtop target=".el-main" :bottom="100" :right="100">
            <div
              style="
                height: 100%;
                width: 100%;
                background-color: #f2f5f6;
                box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
                text-align: center;
                line-height: 40px;
                color: #1989fa;
              "
            >
              UP
            </div>
          </el-backtop>
        </el-main>
        <!-- /主体部分 -->
      </el-container>
    </el-container>
  </div>
</template>
<script>
import common from "@/common/mixins/common";
export default {
  mixins: [common],
  name: "layout",
  data() {
    return {
      // 导航列表
      navBar: [],
      // 面包屑列表
      bran: [],
    };
  },
  components: {},
  props: {},
  created() {
    // 初始化导航菜单
    this.navBar = this.$conf.navBar;
    // 初始化面包屑导航
    this.getRouterBran();
    this.__initNavActive();
  },
  computed: {
    // 计算属性完整写法 既定义值也可接收外部传过来的值进行修改
    slideMenusActive: {
      get() {
        return this.navBar.list[this.navBar.active].subActive || "0";
      },
      set(val) {
        this.navBar.list[this.navBar.active].subActive = val;
      },
    },
    slideMenus() {
      // 将顶部导航栏选择的key值作为定义数据的索引值
      return this.navBar.list[this.navBar.active].subMenu || [];
    },
  },
  watch: {
    // 监听路由变化
    $route(to, from) {
      // 将激活导航栏索引保存到本地
      localStorage.setItem(
        "navActive",
        JSON.stringify({
          top: this.navBar.active,
          left: this.slideMenusActive,
        })
      );
      this.getRouterBran();
    },
  },
  methods: {
    // 读取激活导航栏
    __initNavActive() {
      let res = localStorage.getItem("navActive");
      if (res) {
        res = JSON.parse(res);
        // console.log(res)
        this.navBar.active = res.top;
        this.slideMenusActive = res.left;
      }
    },
    // 获取面包屑导航
    getRouterBran() {
      // console.log(this.$route.matched);
      let b = this.$route.matched.filter((item) => item.name);
      let arr = [];
      b.forEach((item, index) => {
        // 过滤layout和index
        if (item.name === "layout" || item.name === "index") return;
        arr.push({
          name: item.name,
          path: item.path,
          title: item.meta.title,
        });
      });
      // 过滤完index之后 将index重新添加到第一个
      if (arr.length > 0) {
        arr.unshift({ name: "index", path: "/index", title: "后台首页" });
      }
      // console.log(arr);
      this.bran = arr;
    },
    // 顶部导航栏选择
    handleSelect(key, keyPath) {
      // 如果是点击头像下一级的菜单栏就要执行相应的动作
      if (key === "6-1") {
        return console.log(key);
      } else if (key === "6-2") {
        return console.log(key);
      } else {
        // 先获取顶部导航栏选择key值
        this.navBar.active = key;
        // 点击顶部导航栏后将侧边导航重置
        this.slideMenusActive = "0";
        if (this.slideMenus.length) {
          this.$router.push({
            name: this.slideMenus[this.slideMenusActive].pathname,
          });
        }
      }
    },
    // 侧边栏索引值
    SlideSelect(key, keyPath) {
      this.slideMenusActive = key;
      // console.log(this.slideMenus[key].pathname);
      // 跳转到指定页面
      this.$router.push({
        name: this.slideMenus[key].pathname,
      });
    },
  },
};
</script>
<style lang="less" scoped>
.elContainer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.elHeader {
  background: #545c64;
}
</style>
